import { defineStore } from 'pinia'
import { getLocal, setLocal } from '@/utils/storage'
import getRoutePool from '@/assets/js/handleData'
import { toRaw } from 'vue'

export const useAppStore = defineStore('APP', {
  state: () => {
    return {
      sidebarOpened: getLocal('__sidebarOpened', true),
      tagsViewList: getLocal('__tagsViewList__', []),
    }
  },
  actions: {
    changeSidebarOpened() {
      this.sidebarOpened = !this.sidebarOpened
      setLocal('__sidebarOpened__', this.sidebarOpened)
    },
    addTagViewList(tag) {
      const routePool = getRoutePool()
      const isFind = routePool.find((item) => item.path === tag.path)

      if (!isFind) return

      const isExist = this.tagsViewList.find((item) => item.path === tag.path)

      if (!isExist) {
        this.tagsViewList.push(tag)
        setLocal('__tagsViewList__', toRaw(this.tagsViewList))
      }
    },
    removeTagViewList(type, index) {
      let tagsViewList = this.tagsViewList

      switch (type) {
        case 'me':
          tagsViewList.splice(index, 1)
          break
        case 'other':
          tagsViewList = tagsViewList.splice(index, 1)
          break
        case 'right':
          tagsViewList.splice(index + 1)
          break
      }

      this.tagsViewList = tagsViewList

      setLocal('__tagsViewList__', toRaw(this.tagsViewList))
    },
  },
})
